<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>应用 -- JavaBaas</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <style>
        .app-item-name {
            font-size: 22px;
            margin: 0;
            padding: 0;
        }

        .figure {
            font-weight: 400;
            font-size: 20px;
        }

        .sidebar .nav > li > a:hover, .sidebar .nav > li > a:focus {
            display: block;
            color: #999;
            border-right: 1px solid #eee;
        }
    </style>
</head>

<body>

<nav th:replace="titlebar::default"></nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6 col-md-4" th:each="app:${apps}">
            <div class="thumbnail text-center">
                <a class="btn btn-link app-item-name" th:text="${app.name}" th:href="@{${app.id}+'/data'}">Comic</a>

                <div class="row">
                    <div class="col-xs-4 figure"><span th:text="${app.userCount}">3.2万</span></div>
                    <div class="col-xs-4 figure"><span th:text="${app.yesterday}">200万</span></div>
                    <div class="col-xs-4 figure"><span th:text="${app.currentMonth}">100万</span></div>
                </div>
                <div class="row">
                    <div class="col-xs-4 help-block">
                        <small>用户数</small>
                    </div>
                    <div class="col-xs-4 help-block">
                        <small>昨日请求</small>
                    </div>
                    <div class="col-xs-4 help-block">
                        <small>本月请求</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <button class="btn btn-success">快速入门</button>
            <a class="btn btn-primary" href="add">创建应用</a>
        </div>
    </div>
</div>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>创建应用</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <form method="post">
                        <div class="form-group">
                            <label for="appName">应用名称</label>
                            <input class="form-control" id="appName" name="appName"/>
                        </div>
                        <button data-dismiss="modal" class="btn btn-default">关闭</button>
                        <button type="submit" class="btn btn-primary">创建新应用</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>